<template>
    <div class="pageContainer">
        <div class="searchWarp">
            <el-form inline>
                <template v-for="condition in listCondition">
                    <CText :title="condition.name" v-model="condition.value"></CText>
                </template>
            </el-form>
            <div class="schLine">
                <CBtn @click="search(1)">查询</CBtn>
            </div>
        </div>
        <div class="treeTable">
            <div style="flex:1;">
                <div class="btnWarp">
                    <CBtn @click="showEdit()">新增</CBtn>
                    <CBtn>批量删除</CBtn>
                </div>
                <CPageTable :data="tableData" :curPage="paging.curPage" :total="paging.total" @changeSize="changeSize" @changePage="search">
                    <template slot-scope="scope">
                        <CBtn type="text" @click="showEdit(scope.row)">修改</CBtn>
                        <CBtn type="text" @click="doDel(scope.row)">删除</CBtn>
                    </template>

                </CPageTable>
            </div>
        </div>

        <el-dialog :close-on-click-modal="false" title="新增/编辑" :visible.sync="isShowEdit" @close="isShowEdit = false" @enter="doSave">
            <template>
                <el-tabs v-model="curTab" @tab-click="item => curTab = item.name">
                    <el-tab-pane label="基本信息" name="base">
                        <el-form :inline="true" :model="mm" :rules="rules" ref="inForm">
                            <CText form v-model="mm.casNo" title="cas" field="casNo"></CText>
                            <CText form v-model="mm.code" title="货号" field="code"></CText>
                            <CText form v-model="mm.name" title="名称" field="name"></CText>
                            <CText form v-model="mm.title" title="标题" field="title"></CText>
                            <CTextarea form v-model="mm.productDesc" title="描述" field="productDesc"></CTextarea>
                            <CSUpload v-model="mm.imgList" title="列表图"></CSUpload>
                            <CMUpload v-model="mm.listImg" title="详情图"></CMUpload>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="SKU" name="sku">
                        <CBtn @click="showAddProp">新增属性</CBtn>
                        <el-table :data="listProp">
                            <el-table-column label="属性名" prop="propName"></el-table-column>
                            <el-table-column label="属性值" prop="propVal"></el-table-column>
                        </el-table>
                        <div>SKU:</div>
                        <el-table :data="listSKU">
                            <el-table-column label="属性配对" prop="name"></el-table-column>
                            <el-table-column label="价格">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.price" ></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="库存">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.stock" ></el-input>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </template>
            
            
            <template slot="footer" >
                <el-button @click="isShowEdit = false">取 消</el-button>
                <el-button type="primary" @click="saveProduct">确 定</el-button>
            </template>
        </el-dialog>

        <CDailog title="新增属性" :isShow="isShowAddProp" @close="isShowAddProp = false" @enter="doAddProp">
            <el-form :inline="true">
                <CText form v-model="objProp.propName" title="属性名称" field="code"></CText>
                <CSelect form v-model="objProp.propType" title="类型" opType="opPropType" field="propType"></CSelect>
                <CText form v-model="objProp.propVal" title="属性值" placeholder="使用半角逗号分隔" field="name"></CText>
            </el-form>
        </CDailog>

        
    </div>
</template>

<script>
import pagingMixin from '@/mixin/pagingMixin'
export default {
    mixins: [pagingMixin],
    data() {
        return {
            curTab: "base",
            model: "info",
            table: "InfoCoffeProduct",
            listProp: [],
            objProp: {
                propName: "",
                propVal: "",
                propType: ""
            },
            isShowAddProp: false,
            listSKU: [],
            rules: {}
            
        }
    },
    created() {
        this.templateId = "ff4c82f9-b094-4280-af95-aa5902cd3e08";
        
        //取得查询条件
        this.$sys.getPageConditions({id: this.templateId}).then(res => {
            this.listCondition = res.data;
        })
        //查询表格数据
        this.search(1);
    },
    methods: {
        showEdit(row) {
            if (row) {
                this.$info.getCoffeProduct({
                    id: row.id
                }).then(res => {
                    if (200 == res.code) {
                        let product = res.data.product;
                        
                        let listImg = [];
                        if (product.imgDetail1) {
                            listImg.push(product.imgDetail1)
                        }
                        if (product.imgDetail2) {
                            listImg.push(product.imgDetail2)
                        }
                        if (product.imgDetail3) {
                            listImg.push(product.imgDetail3)
                        }
                        if (product.imgDetail4) {
                            listImg.push(product.imgDetail4)
                        }
                        if (product.imgDetail5) {
                            listImg.push(product.imgDetail5)
                        }
                        product.listImg = listImg;
                        this.mm = product;
                        this.listProp = res.data.listProp;
                        this.listSKU = res.data.listSku;
                        this.isShowEdit = true;
                    }
                })
                
            } else {
                this.isShowEdit = true;
            }
            this.$sys.getCheckRules(this.model, this.table, {}).then(res => {
                if (200 == res.code) {
                    this.rules = this.$u.convRules(res.data);
                }
            })
            
        },
        showAddProp() {
            this.isShowAddProp = true;
            this.objProp= {
                propName: "",
                propVal: "",
                propType: "S"
            }
        },
        doAddProp() {
            this.objProp.tag = this.$u.newUUID();
            this.listProp.push(this.objProp);
            this.isShowAddProp = false;
            if (this.objProp.propType != "S") {
                return;
            }

            let listSkuProp = this.listProp.filter(item => item.propType == "S");
            //重置sku
            let listVal = [];
            for (let prop of listSkuProp) {
                let pval = prop.propVal;
                let tempList = pval.split(",");
                listVal.push(tempList);
            }
            let newList = this.$u.cartesian(listVal);
            let newListSKU = []
            for (let item of newList) {
                if (typeof(item) == "object") {
                    newListSKU.push({
                        name: item.join(","),
                        price: 0,
                        stock: 0,
                        propName: item.propName
                    })
                } else {
                    newListSKU.push({
                        name: item,
                        price: 0,
                        stock: 0,
                        propName: item.propName
                    })
                }
            }
            this.listSKU = newListSKU;
        },
        saveProduct() {
            this.$refs.inForm.validate((valid) => {
                if (valid) {
                    this.mm.productType = "S";
                    this.$info.saveCoffeProduct({
                        listImg: this.mm.listImg,
                        product: this.mm,
                        listProp: this.listProp,
                        listSku: this.listSKU
                    }).then(res => {
                        if (200 == res.code) {
                            this.isShowEdit = false;
                            this.$message.success("保存成功");
                            this.search(1);
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.roleWarp {
    display: flex;
    flex-wrap: wrap;
}
</style>